<template>
    <div>
        <video-player  class="video-player vjs-custom-skin"
        ref="videoPlayer" 
        :playsinline="true" 
        :options="playerOptions"
        >
        </video-player>
        <!-- 标题 -->
        <div class="title">
            <!-- <div class="top">{{message.fileName}}</div> -->
            <div class="top">{{number}}-优秀备课视频-{{courseName}}</div>
            <div class="bottom"><div :style="{opacity:activeIndex?0:''}" class="left"><img src="img/shangchuanzhe@2x.png" alt=""><span>上传者：{{message.submitUsername}}</span></div></div>
        </div>
        <!-- tabs -->
        <van-tabs v-model="active" @change="onChange" title-active-color="#2A9CFF" animated>
            <van-tab title="优秀备课视频">
              <ul>
                    <li v-for="(data,index) in list" @click="pushVideo(data.beikeFile,index)" :key="index">
                        <h3 :style="{color:data.beikeFile == url ? '#299BFF' :''}">{{index+1}}-优秀备课视频-{{courseName}}</h3>
                        <div class="times">
                            <div class="left">
                                <!-- <img src="img/shipinbofangqi.png" alt=""><span>{{data.videoTime}}</span> -->
                            </div>
                            <div class="right">
                               <span> {{data.submitUsername}}</span>上传
                            </div>
                        </div>
                    </li>
                </ul>
            </van-tab>
            <!-- <van-tab title="扩展视频">
                <ul>
                    <li>
                        <h3>1、这是上传的视频的名字</h3>
                        <div class="times">
                            <div class="left">
                                <img src="img/shipinbofangqi.png" alt=""><span>00：23：56</span>
                            </div>
                            <div class="right">
                               <span> 于海洋</span>上传
                            </div>
                        </div>
                    </li>
                </ul>
            </van-tab> -->
        </van-tabs>
    </div>
</template>
<script>
export default {
    mounted() {
        this.id = this.$route.query.id;
        this.url = this.$route.query.url;
        this.courseName = this.$route.query.courseName;
        this.number = this.$route.query.index;
        this.playerOptions.sources[0].src = this.$route.query.url;
        (async ()=>{
            let {data} = await this.get('/course/showClasspartAndClassMenu',{classPartId:this.id});
            this.list = data.beiKeFileVos;
            this.message = this.list.filter(item=>item.beikeFile == this.url)[0];
            console.log(this.list);
        })()
    },
    data() {
        return {
            number: "",
            courseName:'',
            active:'',
            id:'',
            url:'',
            list:[],
            message:'',
            activeIndex:0,
            playerOptions : {
                playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: "" //url地址
                }],
                poster: "img/bofangshipin.png", //你的封面地址
                // width: document.documentElement.clientWidth, //播放器宽度
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true  //全屏按钮
                }
            }
        }
    },
    methods: {
        onChange(e){
            this.activeIndex = e;
        },
        pushVideo(url,index){
            this.number = index+1;
            this.playerOptions.sources[0].src = url;
            this.url = url;
        }
    },
}
</script>
<style lang="scss" scoped>
/deep/ .van-tabs__line{
    background-color: #2A9CFF !important;
}
   .title{
       padding: 0.24rem;
       box-sizing: border-box;
        font-size: 0.32rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #343434;
        border-bottom: 0.1rem solid #F7F9FA;
        .bottom{
            margin-top: 0.3rem;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                span{
                    margin-left: 0.1rem;
                    font-size: 0.24rem;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #2E9EFF;
                }
                img{
                    width: 0.21rem;
                    height: 0.26rem;
                }
            }
            .img{
                width: 0.38rem;
                height: 0.34rem;
            }
        }
   }
   ul{
       padding: 0 0.25rem;
       box-sizing: border-box;
       border-top: 0.01rem solid #E7E7E7;
       li{
           padding: 0.3rem 0;
           box-sizing: border-box;
           border-bottom: 0.01rem solid #E7E7E7;
           h3{
              
                font-size: 0.3rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #343434;
           }
           .time{
                font-size: 0.24rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #9C9C9C;
                display: flex;
                align-items: center;
                margin-top: 0.23rem;
                img{
                    width: 0.22rem;
                    height: 0.22rem;
                }
                span{
                    margin-left: 0.23rem;
                }
           }
           .times{
               display: flex;
                font-size: 0.24rem;
               align-items: center;
               justify-content: space-between;
                color: #9C9C9C;
                margin-top: 0.23rem;
                .left{
                    display: flex;
                    align-items: center;
                }
                .right{
                    span{
                        color: #2E9EFF;
                        margin-right: 0.2rem;
                    }
                }
                 img{
                    width: 0.22rem;
                    height: 0.22rem;
                }
                span{
                    margin-left: 0.23rem;
                }
           }
       }
   }
   .active{
       color: #2A9CFF;
   }
</style>